<template>
    <div class="search-frame">
      <div class="model">
        <!-- @click="gotoDetailPage( item['tradeItemId'] )" :id="item['tradeItemId']" -->
        <div class="searchData" v-for="items in searchData" :key="items.id">
          <div class="item-box" v-for="item in items" :key="item.id">
            <div class="asection"  @click="gotoDetailPage(item._index,item._id)">
                <img class="mg" :src="searchDataImg(item)" :alt="searchDataTitle(item)" />
                <div class="bottom-box">
                   <!-- {{}}中可以直接填方法和data值 -->
                   <span>{{ searchDataTitle(item).slice(0,12) }}</span>
                   <p>{{ collectNum(item) }} 积分</p>
                   <div class="btn">立即兑换</div>
                </div>
                <img
                class="flag"
                src="../assets/img/section_new.png"
                alt=""
                v-show="collectNum(item)<100"
                />
                <img
                class="flag"
                src="../assets/img/section_hot.png"
                alt=""
                v-show="collectNum(item)>1000"
                />
            </div>
          </div>
        </div>
        <div class="bottom-tip" :style="{top:searchTipBottomD}" v-show="!this.searchRequestNextPage">
          <span v-if="this.searchDistinguish">正在加载更多...</span>
          <span v-else>没有更多内容了哟~</span>
        </div>    
      </div>
    </div>
</template>
  
<script>
import {SearchFiledContent} from "@/request/api";

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "search",
    components: { },
    data() {
      return {
        searchdx: {
          searchid: this.$route.params.searchid,
          page: 1,
        },
        searchData: [],
        searchPageHeight: null,
        searchRequestNextPage:true,
        searchPageLastPage:null,
        searchShowNone:false
      }
    },
    created() {
       this.searchCreatedFun()
    },
    methods: {
        gotoDetailPage(zid,gid) {
        const id = gid;
        console.log(id);
        const index = zid;
        console.log(zid);
        this.$router.push('/detail/' + index + '/' + id + '/')
      },
      searchCreatedFun( ) {
        // 未用await来请求数据，所以需要用res.then来使用响应体的数据
        const res = SearchFiledContent(this.searchdx.searchid, this.searchdx.page);
        res.then(res => {
          const itemNum = Object.keys(res).length
          const container = []
          for (var i = 0; i < itemNum - 1; i++) {
            container.push(res[i])
          }
          this.searchData.push(container);
          console.log(this.searchData);
          this.searchPageLastPage = res.total_page;
        })
      },
      searchGetData() {
        const res = SearchFiledContent(this.searchdx.searchid,this.searchdx.page);
        res.then(res => {
          const itemNum = Object.keys(res).length
          const container = []
          for (var i = 0; i < itemNum - 1; i++) {
            container.push(res[i])
          }
          this.searchData.push(container)
        })
        console.log(this.searchData);
      },
      // 滚动函数
      searchScroll() {
        // this表示该组件，获取该组件卷上去的距离
        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; //兼容性
        console.log(this.scrollTop);
        
        // this.$store.dispatch('index_footer_height', this.searchPageHeight - 100)  底部组件的高度
        this.searchPageHeight = document.documentElement.scrollHeight || document.body.scrollHeight  //元素本身高度
        console.log(this.searchPageHeight);

        this.clientHeight = document.documentElement.clientHeight || document.body.clientHeight
        if (this.scrollTop + this.clientHeight >= this.searchPageHeight - 100 && this.searchRequestNextPage && this.searchdx.page < this.searchPageLastPage) {
          this.searchdx.page += 1;   //请求页面数加1
          console.log(this.searchdx.page);
          this.searchGetData();
          // this.$store.dispatch('commonFooterShow', false)
          this.searchRequestNextPage = false;
        }
      },
      searchDataImg(item) {
        return item['_source']['data']['result']['skuInfo']['img'] + "_640x854.v1cAC.40.webp"
      },
      searchDataTitle(item) {
        return item['_source']['data']['result']['itemInfo']['title']
      },
      searchDataPrice(item) {
        return item['_source']['data']['result']['itemInfo']['lowPrice']
      },
      collectNum(item){
        return item['_source']['data']['result']['itemInfo']['cFav']
      }
    },
    computed: {
      searchTipBottomD() {
        if(this.searchPageHeight<200){
          return this.searchPageHeight +200+ 'px'
        }
        return this.searchPageHeight + 20 + 'px'
      },

      searchDistinguish() {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.searchShowNone = this.searchdx.page < this.searchPageLastPage;
        if (!this.searchShowNone) {
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.searchRequestNextPage = false;
        }
        return this.searchShowNone
      },
    },
    mounted() {
      document.addEventListener("scroll", this.searchScroll)
    },
    unmounted() {
      document.removeEventListener("scroll", this.searchScroll)
    },
    watch:{   
      $route(to,from){
        this.searchData = [];
        console.log('created');
        this.searchdx.page = 1;
        this.searchCreatedFun( )
      },
      searchPageHeight(newNum, oldNum) {
        this.searchRequestNextPage = true
        if (!this.searchDistinguish) {
          this.searchRequestNextPage = false
        }
      }
    },
   //监听路由传输的id值，id值发生改变时可以改变当前组件的id值
    beforeRouteUpdate(to, from){
      // eslint-disable-next-line vue/no-mutating-props
      this.searchdx.searchid = to.params.searchid;
    }
}
</script>

<style lang = "less" scoped>
.search-frame{
    margin:0 auto;
    margin-top: 120px;
  .model{
        width: 1200px; 
    // overflow: hidden; 
        display: flex;
        /* 自动换行 */
        flex-wrap: wrap;
        justify-content: space-between;
        // width: 100%;
        margin: 0 auto;
        padding: 0;
    .item-box{
      list-style:none;
      // less语法，&表示当前选择器
      &:nth-of-type(4n) {
        margin-right: 0px;
      }
      margin-bottom:30px; 
      width: 285px;
      float: left;
      margin-right: 20px;
      position: relative;
      border-radius:15px;
      .asection {
        border-radius:15px;
        width: 285px;
        height: 512px;
        position: relative;     
        // overflow: hidden;
        transition: all 0.5s linear;
        .mg{
          width: 285px;
          height: 330px;
          border-radius:15px 15px 0 0;
        }
      }
  
      .bottom-box {
        border-radius: 0 0 15px 15px;
        width: 285px;
        height: 162px;
        padding-bottom:20px;
        background-color: rgb(245, 245, 245);
        text-align: center;
        span{
          margin:0;
          font-size: 20px;
          // font-family: SourceHanSansSC;
          font-weight: 300;
          color: #333333;
          height: 56px;
          line-height: 56px;
          /* background-color: #ffc; */
        }
        p {
          font-size: 18px;
          font-family: SourceHanSansSC;
          font-weight: bold;
          color: #fd604d;
        }
        .btn {
          width: 100px;
          height: 36px;
          line-height: 36px;
          border: 1px solid #856437;
          margin: 20px auto 0;
          font-size: 18px;
          font-family: SourceHanSansSC;
          font-weight: 300;
          color: #856437;
        }
      }
  
      .flag {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 15px 0 0 0;
      }
  
      &:hover {
        cursor: pointer;
        .asection {
          margin-top: -15px;   //向上移动15px
          box-shadow: 0 0 10px #ccc;    //阴影，水平移动加垂直移动，模糊距离加阴影颜色
          .btn {
            background-color: #856437;
            color: #fff;
          }
        }
      }
    }
  }
}
 
  </style>